<template>
  <BasePage title="系统设置" description="管理系统全局设置">
    <!-- 设置分类导航 -->
    <div class="bg-white rounded-lg shadow-sm overflow-hidden mb-6">
      <div class="flex border-b border-gray-100">
        <button 
          v-for="(tab, index) in tabs" 
          :key="index"
          @click="activeTab = tab.id"
          :class="[
            'px-4 py-3 text-sm font-medium transition-colors',
            activeTab === tab.id 
              ? 'text-blue-600 border-b-2 border-blue-500' 
              : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'
          ]"
        >
          {{ tab.name }}
        </button>
      </div>
    </div>
    
    <!-- 基本设置 -->
    <div v-if="activeTab === 'basic'" class="space-y-6">
      <!-- 学校信息设置 -->
      <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        <div class="p-4 border-b border-gray-100">
          <h3 class="text-lg font-medium text-gray-800">学校信息</h3>
          <p class="text-sm text-gray-500 mt-1">设置学校基本信息</p>
        </div>
        
        <div class="p-4">
          <BaseForm @submit="saveSchoolInfo">
            <div class="form-group">
              <label class="form-label">学校名称</label>
              <input 
                v-model="schoolInfo.name" 
                type="text" 
                class="form-input" 
                required
              >
            </div>
            
            <div class="form-group">
              <label class="form-label">学校代码</label>
              <input 
                v-model="schoolInfo.code" 
                type="text" 
                class="form-input" 
                required
              >
            </div>
            
            <div class="form-group">
              <label class="form-label">学校地址</label>
              <input 
                v-model="schoolInfo.address" 
                type="text" 
                class="form-input" 
                required
              >
            </div>
            
            <div class="form-group">
              <label class="form-label">联系电话</label>
              <input 
                v-model="schoolInfo.phone" 
                type="tel" 
                class="form-input" 
                required
              >
            </div>
            
            <div class="form-group">
              <label class="form-label">学校简介</label>
              <textarea 
                v-model="schoolInfo.description" 
                class="form-input" 
                rows="3"
              ></textarea>
            </div>
            
            <div class="form-group">
              <label class="form-label">学校Logo</label>
              <div class="flex items-center space-x-4">
                <div 
                  class="w-16 h-16 bg-gray-100 rounded-lg flex items-center justify-center overflow-hidden"
                >
                  <img 
                    v-if="schoolInfo.logoUrl" 
                    :src="schoolInfo.logoUrl" 
                    alt="学校Logo" 
                    class="w-full h-full object-cover"
                  >
                  <Image v-else class="w-8 h-8 text-gray-400" />
                </div>
                <button 
                  type="button"
                  class="px-3 py-1.5 bg-gray-100 text-gray-700 rounded text-sm hover:bg-gray-200 transition-colors"
                >
                  上传Logo
                </button>
              </div>
            </div>
          </BaseForm>
        </div>
      </div>
      
      <!-- 系统参数设置 -->
      <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        <div class="p-4 border-b border-gray-100">
          <h3 class="text-lg font-medium text-gray-800">系统参数</h3>
          <p class="text-sm text-gray-500 mt-1">设置系统运行参数</p>
        </div>
        
        <div class="p-4">
          <BaseForm @submit="saveSystemParams">
            <div class="form-group">
              <label class="form-label">系统名称</label>
              <input 
                v-model="systemParams.name" 
                type="text" 
                class="form-input" 
                required
              >
            </div>
            
            <div class="form-group">
              <label class="form-label">系统版本</label>
              <input 
                v-model="systemParams.version" 
                type="text" 
                class="form-input" 
                disabled
              >
            </div>
            
            <div class="form-group">
              <div class="flex justify-between">
                <label class="form-label">数据保留天数</label>
                <span class="text-sm text-gray-500">{{ systemParams.dataRetentionDays }}天</span>
              </div>
              <input 
                v-model="systemParams.dataRetentionDays" 
                type="range" 
                min="30" 
                max="365" 
                step="30"
                class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
              >
            </div>
            
            <div class="form-group">
              <label class="form-label">系统维护时间</label>
              <div class="grid grid-cols-2 gap-3">
                <input 
                  v-model="systemParams.maintenanceStartTime" 
                  type="time" 
                  class="form-input" 
                >
                <input 
                  v-model="systemParams.maintenanceEndTime" 
                  type="time" 
                  class="form-input" 
                >
              </div>
              <p class="text-xs text-gray-500 mt-1">系统维护期间，用户将无法访问系统</p>
            </div>
          </BaseForm>
        </div>
      </div>
    </div>
    
    <!-- 通知设置 -->
    <div v-if="activeTab === 'notification'" class="space-y-6">
      <!-- 提醒设置 -->
      <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        <div class="p-4 border-b border-gray-100">
          <h3 class="text-lg font-medium text-gray-800">提醒设置</h3>
          <p class="text-sm text-gray-500 mt-1">设置系统自动提醒规则</p>
        </div>
        
        <div class="p-4">
          <BaseForm @submit="saveNotificationSettings">
            <div class="form-group">
              <div class="flex items-center justify-between">
                <label class="form-label mb-0">开启上报提醒</label>
                <div class="relative inline-block w-10 align-middle select-none transition duration-200 ease-in">
                  <input 
                    type="checkbox" 
                    v-model="notificationSettings.enableReportReminder"
                    class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"
                  />
                  <label 
                    class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"
                    :class="{'bg-green-400': notificationSettings.enableReportReminder}"
                  ></label>
                </div>
              </div>
            </div>
            
            <div class="form-group" v-if="notificationSettings.enableReportReminder">
              <label class="form-label">提醒时间</label>
              <div class="grid grid-cols-2 gap-3">
                <div>
                  <select v-model="notificationSettings.reminderTime.hour" class="form-input">
                    <option v-for="h in 24" :key="h-1" :value="h-1">{{ h-1 }}时</option>
                  </select>
                </div>
                <div>
                  <select v-model="notificationSettings.reminderTime.minute" class="form-input">
                    <option v-for="m in 12" :key="(m-1)*5" :value="(m-1)*5">{{ (m-1)*5 }}分</option>
                  </select>
                </div>
              </div>
            </div>
            
            <div class="form-group">
              <div class="flex items-center justify-between">
                <label class="form-label mb-0">开启逾期提醒</label>
                <div class="relative inline-block w-10 align-middle select-none transition duration-200 ease-in">
                  <input 
                    type="checkbox" 
                    v-model="notificationSettings.enableOverdueReminder"
                    class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"
                  />
                  <label 
                    class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"
                    :class="{'bg-green-400': notificationSettings.enableOverdueReminder}"
                  ></label>
                </div>
              </div>
            </div>
            
            <div class="form-group">
              <div class="flex items-center justify-between">
                <label class="form-label mb-0">开启异常提醒</label>
                <div class="relative inline-block w-10 align-middle select-none transition duration-200 ease-in">
                  <input 
                    type="checkbox" 
                    v-model="notificationSettings.enableAbnormalReminder"
                    class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"
                  />
                  <label 
                    class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"
                    :class="{'bg-green-400': notificationSettings.enableAbnormalReminder}"
                  ></label>
                </div>
              </div>
            </div>
          </BaseForm>
        </div>
      </div>
      
      <!-- 消息模板 -->
      <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        <div class="p-4 border-b border-gray-100">
          <h3 class="text-lg font-medium text-gray-800">消息模板</h3>
          <p class="text-sm text-gray-500 mt-1">设置系统消息模板</p>
        </div>
        
        <div class="p-4">
          <BaseForm @submit="saveMessageTemplates">
            <div class="form-group">
              <label class="form-label">上报提醒模板</label>
              <textarea 
                v-model="messageTemplates.reportReminder" 
                class="form-input" 
                rows="3"
                placeholder="请输入上报提醒模板内容"
              ></textarea>
              <p class="text-xs text-gray-500 mt-1">可用变量：{学校名称}、{上报时间}、{截止时间}</p>
            </div>
            
            <div class="form-group">
              <label class="form-label">逾期提醒模板</label>
              <textarea 
                v-model="messageTemplates.overdueReminder" 
                class="form-input" 
                rows="3"
                placeholder="请输入逾期提醒模板内容"
              ></textarea>
              <p class="text-xs text-gray-500 mt-1">可用变量：{学校名称}、{上报时间}、{截止时间}、{逾期天数}</p>
            </div>
            
            <div class="form-group">
              <label class="form-label">异常提醒模板</label>
              <textarea 
                v-model="messageTemplates.abnormalReminder" 
                class="form-input" 
                rows="3"
                placeholder="请输入异常提醒模板内容"
              ></textarea>
              <p class="text-xs text-gray-500 mt-1">可用变量：{学校名称}、{异常类型}、{异常时间}、{处理人}</p>
            </div>
          </BaseForm>
        </div>
      </div>
    </div>
    
    <!-- 权限设置 -->
    <div v-if="activeTab === 'permission'" class="space-y-6">
      <!-- 角色管理 -->
      <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        <div class="p-4 border-b border-gray-100">
          <h3 class="text-lg font-medium text-gray-800">角色管理</h3>
          <p class="text-sm text-gray-500 mt-1">管理系统角色及权限</p>
        </div>
        
        <div class="p-4">
          <div class="flex justify-between mb-4">
            <div class="relative">
              <input 
                type="text" 
                placeholder="搜索角色" 
                class="pl-8 pr-4 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              >
              <Search class="w-4 h-4 text-gray-400 absolute left-2.5 top-2.5" />
            </div>
            
            <button 
              @click="showAddRoleDialog = true"
              class="px-3 py-2 bg-blue-500 text-white rounded-lg text-sm hover:bg-blue-600 transition-colors flex items-center"
            >
              <Plus class="w-4 h-4 mr-1" />
              添加角色
            </button>
          </div>
          
          <div class="divide-y divide-gray-100">
            <div 
              v-for="(role, index) in roles" 
              :key="index"
              class="py-3 flex justify-between items-center"
            >
              <div>
                <div class="font-medium">{{ role.name }}</div>
                <div class="text-xs text-gray-500 mt-0.5">{{ role.description }}</div>
              </div>
              
              <div class="flex space-x-2">
                <button 
                  @click="editRole(role)"
                  class="p-1.5 text-gray-500 hover:text-blue-500 transition-colors"
                >
                  <Edit class="w-4 h-4" />
                </button>
                
                <button 
                  @click="deleteRole(role)"
                  class="p-1.5 text-gray-500 hover:text-red-500 transition-colors"
                >
                  <Trash class="w-4 h-4" />
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 用户管理 -->
      <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        <div class="p-4 border-b border-gray-100">
          <h3 class="text-lg font-medium text-gray-800">用户管理</h3>
          <p class="text-sm text-gray-500 mt-1">管理系统用户及角色分配</p>
        </div>
        
        <div class="p-4">
          <div class="flex justify-between mb-4">
            <div class="relative">
              <input 
                type="text" 
                placeholder="搜索用户" 
                class="pl-8 pr-4 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              >
              <Search class="w-4 h-4 text-gray-400 absolute left-2.5 top-2.5" />
            </div>
            
            <button 
              @click="showAddUserDialog = true"
              class="px-3 py-2 bg-blue-500 text-white rounded-lg text-sm hover:bg-blue-600 transition-colors flex items-center"
            >
              <Plus class="w-4 h-4 mr-1" />
              添加用户
            </button>
          </div>
          
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead>
                <tr>
                  <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户名</th>
                  <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
                  <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">角色</th>
                  <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                  <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                <tr v-for="(user, index) in users" :key="index">
                  <td class="px-3 py-2 whitespace-nowrap text-sm">{{ user.username }}</td>
                  <td class="px-3 py-2 whitespace-nowrap text-sm">{{ user.name }}</td>
                  <td class="px-3 py-2 whitespace-nowrap text-sm">
                    <span class="px-2 py-0.5 bg-blue-100 text-blue-800 rounded text-xs">
                      {{ user.role }}
                    </span>
                  </td>
                  <td class="px-3 py-2 whitespace-nowrap text-sm">
                    <span 
                      :class="[
                        'px-2 py-0.5 rounded text-xs',
                        user.status === '启用' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
                      ]"
                    >
                      {{ user.status }}
                    </span>
                  </td>
                  <td class="px-3 py-2 whitespace-nowrap text-sm">
                    <div class="flex space-x-2">
                      <button 
                        @click="editUser(user)"
                        class="p-1 text-gray-500 hover:text-blue-500 transition-colors"
                      >
                        <Edit class="w-3.5 h-3.5" />
                      </button>
                      
                      <button 
                        @click="resetUserPassword(user)"
                        class="p-1 text-gray-500 hover:text-amber-500 transition-colors"
                      >
                        <Key class="w-3.5 h-3.5" />
                      </button>
                      
                      <button 
                        @click="toggleUserStatus(user)"
                        class="p-1 text-gray-500 hover:text-green-500 transition-colors"
                      >
                        <Power class="w-3.5 h-3.5" />
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 保存按钮 -->
    <div class="fixed bottom-20 right-4">
      <button 
        @click="saveSettings" 
        class="bg-green-500 text-white rounded-full p-3 shadow-lg hover:bg-green-600 transition-colors"
      >
        <Save class="w-6 h-6" />
      </button>
    </div>
    
    <!-- 添加角色弹窗 -->
    <div v-if="showAddRoleDialog" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
      <div class="bg-white rounded-lg max-w-md w-full p-5">
        <h3 class="text-lg font-medium text-gray-800 mb-4">添加角色</h3>
        
        <BaseForm @submit="saveRole">
          <div class="form-group">
            <label class="form-label">角色名称</label>
            <input 
              v-model="newRole.name" 
              type="text" 
              class="form-input" 
              required
            >
          </div>
          
          <div class="form-group">
            <label class="form-label">角色描述</label>
            <input 
              v-model="newRole.description" 
              type="text" 
              class="form-input" 
            >
          </div>
          
          <div class="form-group">
            <label class="form-label">权限设置</label>
            <div class="space-y-2 mt-2">
              <div 
                v-for="(permission, index) in permissions" 
                :key="index"
                class="flex items-center"
              >
                <input 
                  :id="`permission-${index}`" 
                  type="checkbox" 
                  v-model="newRole.permissions" 
                  :value="permission.id"
                  class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                >
                <label :for="`permission-${index}`" class="ml-2 text-sm text-gray-700">{{ permission.name }}</label>
              </div>
            </div>
          </div>
          
          <div class="flex space-x-3 mt-6">
            <button 
              type="submit" 
              class="flex-1 py-2 bg-blue-500 text-white rounded-lg font-medium hover:bg-blue-600 transition-colors"
            >
              保存
            </button>
            <button 
              type="button"
              @click="showAddRoleDialog = false" 
              class="flex-1 py-2 bg-gray-100 text-gray-700 rounded-lg font-medium hover:bg-gray-200 transition-colors"
            >
              取消
            </button>
          </div>
        </BaseForm>
      </div>
    </div>
    
    <!-- 添加用户弹窗 -->
    <div v-if="showAddUserDialog" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
      <div class="bg-white rounded-lg max-w-md w-full p-5">
        <h3 class="text-lg font-medium text-gray-800 mb-4">添加用户</h3>
        
        <BaseForm @submit="saveUser">
          <div class="form-group">
            <label class="form-label">用户名</label>
            <input 
              v-model="newUser.username" 
              type="text" 
              class="form-input" 
              required
            >
          </div>
          
          <div class="form-group">
            <label class="form-label">姓名</label>
            <input 
              v-model="newUser.name" 
              type="text" 
              class="form-input" 
              required
            >
          </div>
          
          <div class="form-group">
            <label class="form-label">初始密码</label>
            <input 
              v-model="newUser.password" 
              type="password" 
              class="form-input" 
              required
            >
          </div>
          
          <div class="form-group">
            <label class="form-label">角色</label>
            <select 
              v-model="newUser.role" 
              class="form-input" 
              required
            >
              <option value="">请选择角色</option>
              <option 
                v-for="(role, index) in roles" 
                :key="index"
                :value="role.name"
              >
                {{ role.name }}
              </option>
            </select>
          </div>
          
          <div class="flex space-x-3 mt-6">
            <button 
              type="submit" 
              class="flex-1 py-2 bg-blue-500 text-white rounded-lg font-medium hover:bg-blue-600 transition-colors"
            >
              保存
            </button>
            <button 
              type="button"
              @click="showAddUserDialog = false" 
              class="flex-1 py-2 bg-gray-100 text-gray-700 rounded-lg font-medium hover:bg-gray-200 transition-colors"
            >
              取消
            </button>
          </div>
        </BaseForm>
      </div>
    </div>
    
    <!-- 成功提示 -->
    <div v-if="showSuccessDialog" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
      <div class="bg-white rounded-lg max-w-sm w-full p-5 text-center">
        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <CheckCircle class="w-8 h-8 text-green-500" />
        </div>
        <h3 class="text-lg font-medium text-gray-800 mb-2">保存成功</h3>
        <p class="text-gray-600 mb-4">系统设置已成功保存</p>
        <button 
          @click="showSuccessDialog = false" 
          class="w-full py-2 bg-green-500 text-white rounded-lg font-medium hover:bg-green-600 transition-colors"
        >
          确定
        </button>
      </div>
    </div>
  </BasePage>
</template>

<script setup>
import { ref } from 'vue';
import BasePage from '../../components/BasePage.vue';
import BaseForm from '../../components/BaseForm.vue';
import { 
  Image, 
  Search, 
  Plus, 
  Edit, 
  Trash, 
  Save, 
  CheckCircle,
  Key,
  Power
} from 'lucide-vue-next';

// 设置分类
const tabs = [
  { id: 'basic', name: '基本设置' },
  { id: 'notification', name: '通知设置' },
  { id: 'permission', name: '权限设置' }
];
const activeTab = ref('basic');

// 学校信息
const schoolInfo = ref({
  name: '示例大学',
  code: 'XDX001',
  address: '北京市海淀区示例路123号',
  phone: '010-12345678',
  description: '示例大学创建于1980年，是一所以工科为主的综合性大学。',
  logoUrl: ''
});

// 系统参数
const systemParams = ref({
  name: '学生健康上报系统',
  version: 'v1.0.0',
  dataRetentionDays: 180,
  maintenanceStartTime: '23:00',
  maintenanceEndTime: '01:00'
});

// 通知设置
const notificationSettings = ref({
  enableReportReminder: true,
  reminderTime: {
    hour: 7,
    minute: 30
  },
  enableOverdueReminder: true,
  enableAbnormalReminder: true
});

// 消息模板
const messageTemplates = ref({
  reportReminder: '{学校名称}提醒您，今日健康上报时间为{上报时间}至{截止时间}，请及时完成上报。',
  overdueReminder: '{学校名称}提醒您，您已连续{逾期天数}天未完成健康上报，请尽快完成。',
  abnormalReminder: '{学校名称}提醒您，您的健康上报出现{异常类型}异常，请联系{处理人}处理。'
});

// 角色管理
const roles = ref([
  { name: '系统管理员', description: '拥有系统所有权限' },
  { name: '学校管理员', description: '管理学校数据和用户' },
  { name: '学院管理员', description: '管理学院数据和用户' },
  { name: '辅导员', description: '管理班级数据和学生' },
  { name: '学生', description: '提交健康上报数据' }
]);

// 权限列表
const permissions = ref([
  { id: 'system_settings', name: '系统设置' },
  { id: 'user_management', name: '用户管理' },
  { id: 'role_management', name: '角色管理' },
  { id: 'data_management', name: '数据管理' },
  { id: 'report_management', name: '上报管理' },
  { id: 'statistics_view', name: '统计查看' },
  { id: 'export_data', name: '导出数据' }
]);

// 用户管理
const users = ref([
  { username: 'admin', name: '系统管理员', role: '系统管理员', status: '启用' },
  { username: 'principal', name: '王校长', role: '学校管理员', status: '启用' },
  { username: 'dean1', name: '张院长', role: '学院管理员', status: '启用' },
  { username: 'teacher1', name: '李老师', role: '辅导员', status: '启用' },
  { username: 'student1', name: '张三', role: '学生', status: '禁用' }
]);

// 弹窗控制
const showAddRoleDialog = ref(false);
const showAddUserDialog = ref(false);
const showSuccessDialog = ref(false);

// 新角色
const newRole = ref({
  name: '',
  description: '',
  permissions: []
});

// 新用户
const newUser = ref({
  username: '',
  name: '',
  password: '',
  role: ''
});

// 保存学校信息
const saveSchoolInfo = () => {
  console.log('保存学校信息:', schoolInfo.value);
  showSuccessDialog.value = true;
};

// 保存系统参数
const saveSystemParams = () => {
  console.log('保存系统参数:', systemParams.value);
  showSuccessDialog.value = true;
};

// 保存通知设置
const saveNotificationSettings = () => {
  console.log('保存通知设置:', notificationSettings.value);
  showSuccessDialog.value = true;
};

// 保存消息模板
const saveMessageTemplates = () => {
  console.log('保存消息模板:', messageTemplates.value);
  showSuccessDialog.value = true;
};

// 编辑角色
const editRole = (role) => {
  newRole.value = { ...role, permissions: [] };
  showAddRoleDialog.value = true;
};

// 删除角色
const deleteRole = (role) => {
  if (confirm(`确定要删除角色「${role.name}」吗？`)) {
    const index = roles.value.findIndex(r => r.name === role.name);
    if (index !== -1) {
      roles.value.splice(index, 1);
    }
  }
};

// 保存角色
const saveRole = () => {
  const existingIndex = roles.value.findIndex(r => r.name === newRole.value.name);
  if (existingIndex !== -1) {
    roles.value[existingIndex] = { ...newRole.value };
  } else {
    roles.value.push({ ...newRole.value });
  }
  
  showAddRoleDialog.value = false;
  newRole.value = { name: '', description: '', permissions: [] };
  showSuccessDialog.value = true;
};

// 编辑用户
const editUser = (user) => {
  newUser.value = { ...user, password: '' };
  showAddUserDialog.value = true;
};

// 重置用户密码
const resetUserPassword = (user) => {
  if (confirm(`确定要重置「${user.name}」的密码吗？`)) {
    console.log('重置密码:', user.username);
    alert(`用户「${user.name}」的密码已重置为默认密码`);
  }
};

// 切换用户状态
const toggleUserStatus = (user) => {
  user.status = user.status === '启用' ? '禁用' : '启用';
  console.log('切换用户状态:', user.username, user.status);
};

// 保存用户
const saveUser = () => {
  const existingIndex = users.value.findIndex(u => u.username === newUser.value.username);
  if (existingIndex !== -1) {
    users.value[existingIndex] = { ...newUser.value, status: users.value[existingIndex].status };
  } else {
    users.value.push({ ...newUser.value, status: '启用' });
  }
  
  showAddUserDialog.value = false;
  newUser.value = { username: '', name: '', password: '', role: '' };
  showSuccessDialog.value = true;
};

// 保存所有设置
const saveSettings = () => {
  console.log('保存所有设置');
  showSuccessDialog.value = true;
  
  // 实际应用中，这里会调用API保存所有设置
};
</script>

<style scoped>
.toggle-checkbox:checked {
  right: 0;
  border-color: #68D391;
}
.toggle-label {
  transition: background-color 0.2s ease-in;
}
</style>